import type { Meta, StoryObj } from "@storybook/react-webpack5";
import { Button, ButtonType, ButtonSize } from "./button";

/**
 * Button 组件的 Storybook 元数据配置
 * 定义了组件在 Storybook 中的基本信息和交互控件
 */
const meta = {
  title: "Components/Button", // 组件在 Storybook 侧边栏中的显示路径
  component: Button, // 关联的 React 组件
  parameters: {
    layout: "centered", // 布局方式：居中显示
  },
  tags: ["autodocs"], // 自动生成文档标签
  argTypes: {
    // 按钮类型控件配置
    btnType: {
      control: { type: "select" }, // 使用下拉选择器控件
      options: Object.values(ButtonType), // 选项来自 ButtonType 枚举
      description: "按钮类型", // 控件描述
    },
    // 按钮尺寸控件配置
    size: {
      control: { type: "select" }, // 使用下拉选择器控件
      options: Object.values(ButtonSize), // 选项来自 ButtonSize 枚举
      description: "按钮尺寸", // 控件描述
    },
    // 禁用状态控件配置
    disabled: {
      control: "boolean", // 使用布尔值开关控件
      description: "是否禁用", // 控件描述
    },
    // 点击事件处理
    onClick: { action: "clicked" }, // 记录点击事件的动作
  },
} satisfies Meta<typeof Button>;

export default meta;

/**
 * Story 类型定义
 * 基于元数据生成的 Story 类型，用于类型安全的 Story 定义
 */
type Story = StoryObj<typeof meta>;

/**
 * 默认按钮示例
 * 展示默认样式的按钮，最基础的按钮样式
 */
export const Default: Story = {
  name: "默认按钮", // 中文翻译名称
  args: {
    children: "默认按钮", // 按钮显示文本
    btnType: ButtonType.default, // 按钮类型：默认
  },
};

/**
 * 主要按钮示例
 * 展示主要样式的按钮，用于重要操作
 */
export const Primary: Story = {
  name: "主要按钮", // 中文翻译名称
  args: {
    children: "主要按钮", // 按钮显示文本
    btnType: ButtonType.primary, // 按钮类型：主要
  },
};

/**
 * 危险按钮示例
 * 展示危险样式的按钮，用于删除等危险操作
 */
export const Danger: Story = {
  name: "危险按钮", // 中文翻译名称
  args: {
    children: "危险按钮", // 按钮显示文本
    btnType: ButtonType.danger, // 按钮类型：危险
  },
};

/**
 * 链接按钮示例
 * 展示链接样式的按钮，看起来像链接但具有按钮功能
 */
export const Link: Story = {
  name: "链接按钮", // 中文翻译名称
  args: {
    children: "链接按钮", // 按钮显示文本
    btnType: ButtonType.link, // 按钮类型：链接
    href: "https://example.com", // 链接地址（仅对 link 类型有效）
  },
};

/**
 * 大尺寸按钮示例
 * 展示大尺寸按钮样式，用于需要突出显示的重要操作
 */
export const Large: Story = {
  name: "大尺寸按钮", // 中文翻译名称
  args: {
    children: "大按钮", // 按钮显示文本
    size: ButtonSize.lg, // 按钮尺寸：大
    btnType: ButtonType.primary, // 按钮类型：主要
  },
};

/**
 * 小尺寸按钮示例
 * 展示小尺寸按钮样式，用于空间有限的紧凑布局
 */
export const Small: Story = {
  name: "小尺寸按钮", // 中文翻译名称
  args: {
    children: "小按钮", // 按钮显示文本
    size: ButtonSize.sm, // 按钮尺寸：小
    btnType: ButtonType.primary, // 按钮类型：主要
  },
};

/**
 * 禁用状态按钮示例
 * 展示禁用状态的按钮样式，不可交互状态
 */
export const Disabled: Story = {
  name: "禁用状态", // 中文翻译名称
  args: {
    children: "禁用按钮", // 按钮显示文本
    disabled: true, // 禁用状态：true
    btnType: ButtonType.primary, // 按钮类型：主要
  },
};

/**
 * 按钮组示例
 * 展示多个按钮组合使用的场景，使用自定义渲染函数
 */
export const ButtonGroup: Story = {
  name: "按钮组合", // 中文翻译名称
  // 使用 render 函数自定义渲染逻辑
  render: () => (
    <div style={{ display: "flex", gap: "8px" }}>
      {/* 主要按钮 */}
      <Button btnType={ButtonType.primary}>主要</Button>
      {/* 默认按钮 */}
      <Button btnType={ButtonType.default}>默认</Button>
      {/* 危险按钮 */}
      <Button btnType={ButtonType.danger}>危险</Button>
      {/* 链接按钮 */}
      <Button btnType={ButtonType.link} href="#">
        链接
      </Button>
    </div>
  ),
};

/**
 * 所有按钮变体综合示例
 * 展示按钮组件的所有可用变体和功能
 * 使用自定义渲染函数创建复杂的展示布局
 */
export const AllVariants: Story = {
  name: "所有变体", // 中文翻译名称
  render: () => {
    // 定义主题颜色映射对象
    // 这些颜色值对应 _variables.scss 文件中的 SCSS 变量
    const themeColors = {
      gray700: "#495057", // 对应 $gray-700：深灰色，用于标题文字
      primary: "#0d6efd", // 对应 $primary：主要蓝色，用于主要按钮
      gray600: "#6c757d", // 对应 $gray-600：中等灰色，用于说明文字
      danger: "#dc3545", // 对应 $danger：危险红色，用于危险按钮
      gray100: "#f8f9fa", // 对应 $gray-100：浅灰色，用于背景
      white: "#ffffff", // 对应 $white：纯白色，用于默认按钮背景
    };

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
        {/* 不同尺寸按钮展示区域 */}
        <div>
          <h3 style={{ marginBottom: "12px", color: themeColors.gray700 }}>
            不同尺寸
          </h3>
          <div
            style={{
              display: "flex",
              gap: "12px",
              alignItems: "center",
              flexWrap: "wrap",
            }}
          >
            {/* 小尺寸按钮 */}
            <Button size={ButtonSize.sm} btnType={ButtonType.primary}>
              小按钮
            </Button>
            {/* 默认尺寸按钮 */}
            <Button btnType={ButtonType.primary}>默认按钮</Button>
            {/* 大尺寸按钮 */}
            <Button size={ButtonSize.lg} btnType={ButtonType.primary}>
              大按钮
            </Button>
          </div>
        </div>

        {/* 主题颜色类型展示区域 */}
        <div>
          <h3 style={{ marginBottom: "12px", color: themeColors.gray700 }}>
            主题颜色类型
          </h3>
          <div
            style={{
              display: "flex",
              gap: "12px",
              alignItems: "center",
              flexWrap: "wrap",
            }}
          >
            {/* 主要按钮 */}
            <Button btnType={ButtonType.primary}>主要 (Primary)</Button>
            {/* 默认按钮 */}
            <Button btnType={ButtonType.default}>默认 (Default)</Button>
            {/* 危险按钮 */}
            <Button btnType={ButtonType.danger}>危险 (Danger)</Button>
            {/* 链接按钮 */}
            <Button btnType={ButtonType.link} href="#">
              链接 (Link)
            </Button>
          </div>
        </div>

        {/* 禁用状态展示区域 */}
        <div>
          <h3 style={{ marginBottom: "12px", color: themeColors.gray700 }}>
            禁用状态
          </h3>
          <div
            style={{
              display: "flex",
              gap: "12px",
              alignItems: "center",
              flexWrap: "wrap",
            }}
          >
            {/* 禁用的主要按钮 */}
            <Button disabled btnType={ButtonType.primary}>
              禁用主要
            </Button>
            {/* 禁用的默认按钮 */}
            <Button disabled btnType={ButtonType.default}>
              禁用默认
            </Button>
            {/* 禁用的危险按钮 */}
            <Button disabled btnType={ButtonType.danger}>
              禁用危险
            </Button>
            {/* 禁用的链接按钮 */}
            <Button disabled btnType={ButtonType.link} href="#">
              禁用链接
            </Button>
          </div>
        </div>

        {/* 主题颜色说明区域 */}
        <div>
          <h3 style={{ marginBottom: "12px", color: themeColors.gray700 }}>
            主题颜色说明
          </h3>
          <div
            style={{
              backgroundColor: themeColors.gray100, // 浅灰色背景
              padding: "16px", // 内边距
              borderRadius: "8px", // 圆角边框
              fontSize: "14px", // 字体大小
              color: themeColors.gray700, // 文字颜色
            }}
          >
            <p>
              <strong>主题颜色系统：</strong>
            </p>
            <ul style={{ marginTop: "8px", paddingLeft: "20px" }}>
              {/* 主要颜色说明 */}
              <li>
                <span style={{ color: themeColors.primary }}>●</span> Primary (
                {themeColors.primary}) - 主要操作按钮
              </li>
              {/* 默认颜色说明 */}
              <li>
                <span style={{ color: themeColors.gray600 }}>●</span> Default (
                {themeColors.white}) - 默认按钮，悬停时显示主要颜色
              </li>
              {/* 危险颜色说明 */}
              <li>
                <span style={{ color: themeColors.danger }}>●</span> Danger (
                {themeColors.danger}) - 危险操作按钮
              </li>
              {/* 链接颜色说明 */}
              <li>
                <span style={{ color: themeColors.primary }}>●</span> Link (
                {themeColors.primary}) - 链接样式按钮
              </li>
            </ul>
            <p style={{ marginTop: "12px" }}>
              所有颜色都通过 SCSS 变量定义在 <code>_variables.scss</code>{" "}
              文件中，支持全局主题定制。
            </p>
          </div>
        </div>
      </div>
    );
  },
};